<template>
  <div>
    <h2>门店列表</h2>
    <hr />
    门店名称:
    <input type="text" v-model="state.MName" />
    门店电话:
    <input type="text" v-model="state.MPhone" />
    <input type="button" value="查询" @click="MenDianShow" />
    <input type="button" value="新增门店" @click="MenDianAdd" />
    <table border="1">
      <tr>
        <td>Id</td>
        <td>门店名称</td>
        <td>门店电话</td>
        <td>门店地址</td>
        <td>门店Logo</td>
        <td>门店状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{ item.mId }}</td>
        <td>{{ item.mName }}</td>
        <td>{{ item.mPhone }}</td>
        <td>{{ item.mAddress }}</td>
        <td>
          <img :src="item.mPhoto" alt="" width="60" height="60" />
        </td>
        <td>{{ item.mzt == '1' ? '启用' : '停用' }}</td>
        <td>
          <input type="button" v-if="item.mzt == '1'" value="停用" />
          <input type="button" v-else value="启用" />
          <input type="button" value="删除" @click="MenDianShan(item.mId)" />
        </td>
      </tr>
    </table>
    共{{ Count }}条数据,当前第{{ state.index }}页
    <input type="button" value="首页" @click="fenye(1)" />
    <input type="button" value="上一页" @click="fenye(state.index - 1)" />
    <input type="button" value="下一页" @click="fenye(state.index + 1)" />
    <input type="button" value="尾页" @click="fenye(Count2)" />
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();

let data: any = reactive({
  state: {
    index: 1,
    size: 2,
    MName: '',
    MPhone: '',
  },
  list: [],
  Count: 0,
  Count2: 0,
});

let { state, list, Count, Count2 } = toRefs(data);

onMounted(() => {
  MenDianShow();
});

//分页
function fenye(Newindex: any) {
  if (Newindex >= 1 && Newindex <= Count2.value) 
  {
    state.value.index = Newindex;
    MenDianShow();
  }
}

function MenDianAdd() {
  router.push('/MenDianAdd');
}

//列表
function MenDianShow() {
  let obj = {
    index: state.value.index,
    size: state.value.size,
    MName: state.value.MName,
    MPhone: state.value.MPhone,
  };
  axios({
    url: 'https://localhost:7127/api/MenDian/MenDianShow',
    method: 'get',
    params: obj,
  })
    .then((res) => {
      (list.value = res.data.data),
        (Count.value = res.data.count),
        (Count2.value = res.data.count2);
    })
    .catch((err) => {
      console.log(err);
    });
}

function MenDianShan(Mid: any) {
  if(confirm('确认要删除吗'))
{
  let obj={
    Mid:Mid
  }
  axios({
    url:'https://localhost:7127/api/MenDian/MenDianShan',
    method:'post',
    params:obj
  })
  .then(res=>{
    if(res.data.data>0)
  {
    alert('删除成功')
    MenDianShow()
  }
  else
  {
    alert('删除失败')
    return
  }
  })
  .catch(err=>{
    console.log(err)
  })
}
  
}
</script>

<style scoped></style>
